<template>
	<view v-if="visible" class="popup-mask" @tap="handleMaskClick">
		<view class="popup-container" :style="containerStyle" @tap.stop>
			<slot></slot>
		</view>
	</view>
</template>

<script>
export default {
	name: 'simple-popup',
	props: {
		value: {
			type: Boolean,
			default: false
		},
		mode: {
			type: String,
			default: 'center' // center, bottom, top
		},
		borderRadius: {
			type: [String, Number],
			default: 0
		},
		maskCloseAble: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		visible() {
			return this.value
		},
		containerStyle() {
			let style = {}
			if (this.borderRadius) {
				style.borderRadius = this.borderRadius + 'rpx'
			}
			return style
		}
	},
	methods: {
		handleMaskClick() {
			if (this.maskCloseAble) {
				this.$emit('input', false)
			}
		}
	}
}
</script>

<style scoped>
.popup-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.popup-container {
	background-color: white;
	max-width: 90%;
	max-height: 90%;
}
</style> 